<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"
            src="http://127.0.0.1:8001/events/client.js">
    </script>

    <script type="text/javascript" src="vue.min.js"></script>
    <script type="text/javascript" src="underscore-min.js"></script>
</head>
<body>
<div id="app">
    <div v-for="(data, name) in events">
        <h2>{{name}}</h2>
        <div>{{data.latest}}</div>
    </div>
</div>


<script type="text/javascript">

  var EVENTS = [
    'status',
    'uwbbase_stat',
    'user_uwb',
    'user_stat',
    'rtkres_attitude',
    'rtkres_basepos',
    'rtkres_baseobs',
    'rtkres_roverpos',
    'rtkres_roverobs'
  ]

  var events = {}
  _.each(EVENTS, function (value) {
    events[value] = {history: [], latest: undefined}
  })

  var app = new Vue({
    el: '#app',
    data: {
      events: events,
    },
  })

  var client = new Faye.Client('http://localhost:8001/events');
  client.subscribe('/node', function (message) {
    app.events[message.name].latest = message.data
    console.log('Got a smessage: ', message.name, message.data);
  });


</script>

</body>
</html>